<template>
  <el-menu @select="handleSelect" >
    <ElSubMenu :index="'1'" >
      <template #title>{{ tags.categoryTitle }}</template>
      <div class="category-grid">
        <el-menu-item
          v-for="(tag, index) in tags.category"
          :key="index"
          :index="`1-${index}`"
          class="category-item"
          :class="{ active: activeCategory === index }"
        >
          {{ tag }}
        </el-menu-item>
      </div>
    </ElSubMenu>

    <ElSubMenu :index="'2'">
      <template #title>{{ tags.statusTitle }}</template>
      <el-menu-item
        v-for="(status, index) in tags.status"
        :key="index"
        :index="`2-${index}`"
        :class="{ active: activeStatus === index }"
      >
        {{ status }}
      </el-menu-item>
    </ElSubMenu>

    <ElSubMenu :index="'3'">
      <template #title>{{ tags.wordCountTitle }}</template>
      <el-menu-item
        v-for="(wordCount, index) in tags.wordCount"
        :key="index"
        :index="`3-${index}`"
        :class="{ active: activeWordCount === index }"
      >
        {{ wordCount }}
      </el-menu-item>
    </ElSubMenu>

    <ElSubMenu :index="'4'">
      <template #title>{{ tags.attributeTitle }}</template>
      <el-menu-item
        v-for="(attribute, index) in tags.attributes"
        :key="index"
        :index="`4-${index}`"
        :class="{ active: activeAttribute === index }"
      >
        {{ attribute }}
      </el-menu-item>
    </ElSubMenu>
  </el-menu>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { defineEmits } from 'vue';

// 定义 emit 事件来传递数据
const emit = defineEmits(['updateSelectedOptions']);

// 创建响应式标签字段
const tags = ref({
  categoryTitle: '分类',
  category: ['全部', '玄幻', '都市', '穿越', '科幻', '游戏', '悬疑', '生活'],
  statusTitle: '状态',
  status: ['全部', '连载', '完本'],
  wordCountTitle: '字数',
  wordCount: ['全部', '30万字以下', '50-100万字', '100-200万字', '200万字以上'],
  attributeTitle: '属性',
  attributes: ['全部', '免费', 'VIP']
});

// 初始化表单默认值
const selectedOptions = ref({
  category: 0,
  status: 0,
  wordCount: 0,
  attribute: 0
});

// 分别为每个子菜单记录独立的选项
const activeCategory = ref(0);
const activeStatus = ref(0);
const activeWordCount = ref(0);
const activeAttribute = ref(0);

// 处理选择事件
const handleSelect = (index: string) => {
  const [parentIndex, childIndex] = index.split('-').map(Number);

  switch (parentIndex) {
    case 1:
      activeCategory.value = childIndex;
      break;
    case 2:
      activeStatus.value = childIndex;
      break;
    case 3:
      activeWordCount.value = childIndex;
      break;
    case 4:
      activeAttribute.value = childIndex;
      break;
  }

  // 更新选项
  selectedOptions.value = {
    category: activeCategory.value,
    status: activeStatus.value,
    wordCount: activeWordCount.value,
    attribute: activeAttribute.value
  };

  console.log('更新的选项:', selectedOptions.value);

  // 发送选中的数据到父组件
  emit('updateSelectedOptions', selectedOptions.value);

  // 显示选择的提示
  ElMessage.info('表单数据已更新');
};
</script>

<style scoped>


.category-item{
 width: 40%;
  text-align: center; /* 水平居中 */
  width: 100%; /* 确保容器占满可用空间 */
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.category-item {
  text-align: center; 
  width: 100%; 
}


</style>
